<!--优惠券-->
<template>
    <div class="DiscountWallpaper">
        <head-nav></head-nav>
        <div class="zanwei-top"></div>
        <mt-navbar v-model="currentTab">
            <mt-tab-item v-for="(tab,index) in tabs" :id="index" :key="index">
                {{tab}}
            </mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="currentTab">
            <mt-tab-container-item v-for="(tab,index) in tabs" :id="index" :key="index">
                <div class="discountTicket">
                    <mt-loadmore :top-method="refresh" @top-status-change="handleTopChange" ref="loadDone" :bottom-method="loadMore" :bottomDistance="60" :bottom-all-loaded="allLoaded" @bottom-status-change="handleBottomChange">
                        <!--个人信息-->
                        <!-- <div class="information">
                          <p>会员: <span>{{userInfo.XF_SURNAME}}</span></p>
                          <p>您当前会员等级: <span>V{{userInfo.XF_GRADE}}</span></p>
                        </div> -->
                        <!--顶部下拉视图-->
                        <div slot="top" class="mint-loadmore-top">
                            <i v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }" class="iconfont icon-iconxlsx"></i>
                            <span v-show="topStatus !== 'loading'">{{'pull'===topStatus?'下拉可以刷新':'释放立即刷新'}}</span>
                            <mt-spinner v-show="topStatus === 'loading'" type="triple-bounce" :size="40" color="#26a2ff">
                            </mt-spinner>
                        </div>
                        <!--卡券区域-->
                        <ul class="cardList">
                            <li v-for="(card,index) in cardList" :key="index" @click="exchangeFn(card.ID,card.JPINFO.JPLX,card.JPINFO.JPMC,card.ZJUSERID,card.SFHX)" v-if="card.JPINFO">
                                <!--card.sfgq?'#888':-->
                                <!--card.backgroundColor-->
                                <div class="card" :style="{backgroundColor:card.background}" v-if="card.SFHX == 0">
                                    <p class="dt_title">
                                        <span class="tname">乐宾百货</span>
                                    </p>
                                    <div>
                                        <span>{{card.JPINFO.JPMC}}</span>
                                    </div>
                                    <div>
                                        <span></span>
                                        <span v-if="card.JPINFO.HXJSSJ">有效期 {{card.JPINFO.HXJSSJ}}</span>
                                        <span v-else-if="card.JPINFO.HXJSSJ == null" style="opacity: 0;">有效</span>
                                        <span v-else>已过期</span>
                                    </div>
                                </div>
                                <div class="card" :style="{backgroundColor: gray}" v-else>
                                    <p class="dt_title">
                                        <span class="tname">乐宾百货</span>
                                    </p>
                                    <div>
                                        <span>{{card.JPINFO.JPMC}}</span>
                                    </div>
                                    <div>
                                        <span></span>
                                        <!--<span v-if="!card.sfgq">有效期{{card.YXQ}}</span>-->
                                        <span>已领取</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!--底部加载更多-->
                        <div slot="bottom" class="mint-loadmore-bottom">
                            <i v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }" class="iconfont icon-iconxlsx"></i>
                            <span v-show="bottomStatus !== 'loading'">
                                {{'pull'===bottomStatus?'上拉加载更多':'释放立即刷新'}}
                            </span>
                            <mt-spinner v-show="bottomStatus === 'loading'" type="triple-bounce" :size="40" color="#26a2ff">
                            </mt-spinner>
                        </div>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
        <!--<div class="zanwei-bottom"></div>-->
        <!-- 底部导航 -->
        <!--<foot-nav></foot-nav>-->
    </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
import api from "@/api/api";

export default {
    name: "DiscountTicket",
    data() {
        return {
            tabs: ["未领取", "已领取"],
            currentTab: 0,
            topStatus: "",
            bottomStatus: "",
            allLoaded: false,
            userInfo: {},
            cardList: [],
            row: 10,
            num: 1,
            pageType: 1,
            gray: "#999",
            tk_status: 0,
            btnShow: false
        };
    },
    watch: {
        currentTab: function(newVal, oldVal) {
            this.allLoaded = false;
            this.num = 1;
            this.getUserOrderList(false, newVal);
        }
    },
    methods: {
        exchangeFn(jpid,jplx,ll,zjuser,sfhx) {
            let page = this;
            let islq = '';
            if (sfhx == 1) {
//          	MessageBox("提示", "已领取");
//          	return ;
				islq = "islq";
            }
            if (jplx == 2) {// 流量
            	//流量详情
				page.$router.push({
					path: "./FlowDetailJp",
					query: {
						phone: page.userInfo.XF_TELEPHONE,
						ll: ll,
						oid: jpid,
						zjuser: zjuser,
						islq: islq
					}
				});
            } else {
            	page.$router.push({
	                path: "/ScorecreateJp",
	                query: { 
	                	jpid: jpid,
	                	islq: islq
	                }
	            });
            }
            
        },
        /**
         * 下拉状态监听
         * @param status 当前状态
         */
        handleTopChange(status) {
            this.topStatus = status;
        },
        /**
         * 上拉状态监听
         * @param status 当前状态
         */
        handleBottomChange(status) {
            this.bottomStatus = status;
        },
        /**
         * 刷新页面
         */
        refresh() {
            let that = this;
            let currentTab = that.currentTab;
            that.num = 1;
            that.getUserOrderList(false, currentTab);
        },
        /**
         * 加载更多
         */
        loadMore() {
            let that = this;
            let currentTab = that.currentTab;
            this.num++;
            that.getUserOrderList(true, currentTab);
        },
        /**
         * 获取页面数据
         */
        getUserOrderList(isLoadMore, currentTab) {
            let that = this;
            let row = this.row;
            let num = this.num;
            let sfhx = this.currentTab;
            api.getHdUserZjList(row, num, sfhx, that, res => {
                let data = res.data;
                if (data.code === 0) {
                    data = data.data;
                    console.log('游戏')
                    console.log(data)
                    let list = data.list;
                    for (let i = 0; i < list.length; i++) {
                        if (list[i].JPINFO) {
                        	switch (i % 3) {
                                case 0:
                                    list[i].background = "#e30011";
                                    break;
                                case 1:
                                    list[i].background = "#f8931f";
                                    break;
                                case 2:
                                    list[i].background = "#eb6e93";
                                    break;
                            }
                        }
                    }
                    if (isLoadMore) {
                        that.cardList = that.cardList.concat(list);
                        that.$refs.loadDone[currentTab].onBottomLoaded();
                    } else {
                        that.allLoaded = false;
                        that.cardList = list;
                        that.$refs.loadDone[currentTab].onTopLoaded();
                    }
                    if (list.length === 0) {
                        that.allLoaded = true;
                        Toast("没有更多了");
                    }
                } else {
                    MessageBox("提示", data.msg);
                }
            });
        }
    },
    created() {},
    mounted() {
        let that = this;
        let type = this.$route.query.type;
        let title;
        let pageType;
        this.pageType = pageType;
        this.$store.commit("TITLE", "我的奖品");
        // document.title = this.$store.state.title;
        this.getUserOrderList(false, this.currentTab);
        api.getUserInfo(this, res => {
            let data = res.data;
            if (data.code === 0) {
                this.userInfo = res.data.data;
            } else if(data.code === 9999){
                //orcal数据库异常 关闭当前窗口
                MessageBox.alert(data.msg, '温馨提示').then(action => {
                    wx.closeWindow()
                })
            }else {
                MessageBox("提示", data.msg);
            }
        });
    }
};
</script>

<style scoped lang="less">
li {
    list-style: none;
}

.DiscountWallpaper {
    padding-bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    .mint-tab-container {
        margin-top: 0.06rem;
        flex: 1;
    }
    .mint-msgbox-message {
        font-size: 0.32rem;
    }
    .mint-msgbox-wrapper .mint-msgbox-btns .tkjd_btn {
        font-size: 0.34rem !important;
    }
    .mint-msgbox-wrapper .mint-msgbox-btns .mint-msgbox-confirm {
        font-size: 0.34rem !important;
    }
    .mint-msgbox-wrapper .mint-msgbox-input input {
        font-size: 0.3rem !important;
        height: 0.5rem !important;
    }
}

.mint-loadmore-bottom {
    i {
        display: inline-block;
        -webkit-transition: 0.2s linear;
        transition: 0.2s linear;
        vertical-align: middle;
        font-size: 25pt;
        color: #888;
        font-weight: bold;
        transform: rotate(180deg);
    }
    i.is-rotate {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

.mint-loadmore-top {
    height: auto;
    i {
        display: inline-block;
        -webkit-transition: 0.2s linear;
        transition: 0.2s linear;
        vertical-align: middle;
        font-size: 25pt;
        color: #888;
        font-weight: bold;
    }
    i.is-rotate {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .mint-spinner-double-bounce {
        margin: 0 auto;
    }
}

.discountTicket {
    /*padding: 0 .4rem;*/
    /*height: 100%;*/
    max-height: 85vh;
    overflow: scroll;
    .information {
        margin: 0.2rem 0.4rem;
        background: #F05DC4;
        display: flex;
        justify-content: space-between;
        padding: 0.1rem 0.4rem;
    }
    .cardList {
        margin-top: 0.3rem;
        padding: 0 0.4rem;
        min-height: 75vh;
        .card {
            margin-bottom: 0.3rem;
            transition: background 500ms;
            padding: 0.3rem;
            p {
                color: #fff;
                font-size: 14pt;
                border-bottom: 1px solid #fff;
                line-height: 0.6rem;
            }
            div {
                display: flex;
                align-items: center;
                /*margin-top: .1rem;*/
                justify-content: space-between;
                flex-wrap: wrap;
                color: #fff;
                span:nth-child(1) {
                    font-weight: bold;
                    font-size: 16pt;
                    line-height: 0.7rem;
                    flex-shrink: 1;
                }
                span:nth-child(2) {
                    text-align: right;
                    flex: auto;
                }
            }
            .dt_title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 0.6rem;
                .tksq {
                    font-size: 0.28rem;
                    height: 0.44rem;
                    width: 1.42rem;
                    border-radius: 0.08rem;
                    border: 1px solid #ffffff;
                    line-height: 0.44rem;
                    text-align: center;
                }
            }
        }
    }
}
</style>
